<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
    <style type="text/css">
        .xixi{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
<div id="app">
    <!--组件-->
    <!--:数据绑定-->
    <task-app :list="item"></task-app>
    <!--自定义组件内容-->
    <task-app :list="[{message:'xixixi',type:1}]"></task-app>
</div>
<template id="task-template">
    <ul>
        <li>xixixixixi</li>
        <li v-for="item in list">
            <!--三元表达式-->
            <span :class="item.type?'xixi':'hehe'" @click="toggleTask(item)">{{ item.message }}</span>
        </li>
    </ul>
</template>
<script type="text/javascript">
    Vue.component('task-app',{
        props:['list'],
        template:'#task-template',
        methods:{
            toggleTask:function (task) {
                //点击取反
                task.type = !task.type;
                console.log(task);
            }
        },
    })
    new Vue({
        el:'#app',
        data: {
            item: [
                {message: 'foo', type:0},
                {message: 'Bar', type:1},
                {message: 'Maa', type:2},
                {message: 'Daa', type:0},
            ]
        },
    })
</script>
</body>
</html>